import { FC } from 'react';
import { useHistory } from 'react-router-dom';
import { Menu, Layout } from 'antd';
import { routes } from '@/router/config';
import { IRoute } from '@/router/index';
import styles from './index.module.scss';

const { Sider } = Layout;
const { SubMenu } = Menu;

const BaseLeftMenu: FC = () => {
  const history = useHistory();
  function handleClick(path) {
    console.log('====================================');
    console.log('导航到：' + path);
    console.log('====================================');
    history.push(path);
  }
  return (
    <Sider width={200} className={styles.baseLeftMenu}>
      <Menu mode="inline" style={{ height: '100%', borderRight: 0 }}>
        {routes.map((route: IRoute, index) => {
          return (
            <SubMenu key={index} title={route.meta?.title}>
              {route.children &&
                route.children.map((r: IRoute, sIndex: number) => {
                  return (
                    <Menu.Item key={`${index}-${sIndex}`} onClick={() => handleClick(route.path + '/' + r.path)}>
                      {r.meta?.title}
                    </Menu.Item>
                  );
                })}
            </SubMenu>
          );
        })}
      </Menu>
    </Sider>
  );
};
export default BaseLeftMenu;
